import React, { Component } from "react";
import { Button, Form, Header, Message } from "semantic-ui-react";
class LoginFormSet extends Component {
  state = { username: "", password: "" };
  handleSubmit() {
    // 提交数据;
    console.log(this.state);
    this.props.onSubmit(this.state, this.props.history);
  }
  handleChange = (e, { name, value }) => this.setState({ [name]: value });
  render() {
    const headerStyle = {
      letterSpacing: "-.5px",
      fontSize: "24px",
      fontWeight: "300"
    };
    const { username, password } = this.state;
    return (
      <Form loading={this.props.loading}>
        <div
          style={{
            marginBottom: "15px",
            display: "flex",
            justifyContent: "center"
          }}
        >
          <Header as="h1" style={headerStyle}>
            登录到Kurento
          </Header>
        </div>
        <Form.Input
          required
          label="账号名"
          placeholder="请输入你的用户名,或者电子邮件"
          name="username"
          value={username}
          onChange={this.handleChange}
        />
        <Form.Input
          required
          label="密码"
          placeholder="密码格式是大于6位的"
          name="password"
          value={password}
          onChange={this.handleChange}
        />
        <Button
          type="submit"
          fluid
          color="teal"
          onClick={this.handleSubmit.bind(this)}
        >
          登录
        </Button>
        <Message
          error
          header="错误信息"
          style={{ display: this.props.error ? "block" : "none" }}
          list={this.props.error}
        />
      </Form>
    );
  }
}

// LoginFormSet.propTypes = {
//   handleClick: PropTypes.func.
// };
export default LoginFormSet;
